<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0087: Nodes-n-noodles VI – Adding Hot Spots | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0087: Nodes-n-noodles VI – Adding Hot Spots" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="This GTK Tutorial covers drawing node host spots for a node-n-noodles demo." />
<meta property="og:description" content="This GTK Tutorial covers drawing node host spots for a node-n-noodles demo." />
<link rel="canonical" href="http://localhost:4000/posts/0087-nodes-vi-hotspots.html" />
<meta property="og:url" content="http://localhost:4000/posts/0087-nodes-vi-hotspots.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-11-12T00:00:00-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0087: Nodes-n-noodles VI – Adding Hot Spots" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-11-12T00:00:00-05:00","datePublished":"2019-11-12T00:00:00-05:00","description":"This GTK Tutorial covers drawing node host spots for a node-n-noodles demo.","headline":"0087: Nodes-n-noodles VI – Adding Hot Spots","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0087-nodes-vi-hotspots.html"},"url":"http://localhost:4000/posts/0087-nodes-vi-hotspots.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/nodes.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-11-12T00:00:00-05:00" itemprop="datePublished">Tuesday, November 12, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0087-nodes-n-noodles-vi--adding-hot-spots">0087: Nodes-n-noodles VI – Adding Hot Spots</h1>

<p>Here’s a look at what we’re dealing with today. It may look the same as the previous couple of screen shots, but clicking on one of the node connectors (yellow or orange circles) or the light blue drag-bar area dumps a line to the terminal.</p>

<!-- 0, 1 -->
<!-- first occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/023_nodes/nodes_07.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/023_nodes/nodes_07_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/023_nodes/nodes_07_drawingarea_node_with_hotspot.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for first (1st) occurrence of application and terminal screen shots on a single page -->

<p>The objective now is to move toward a node that’s actually moveable… like the class name says. Here’s a breakdown of how we’re going about this:</p>

<ul>
  <li>when the pointer is within certain areas on the node,  and</li>
  <li>the user clicks and holds mouse button #1, and</li>
  <li>moves the pointer again,</li>
  <li>a function triggers that moves the node.</li>
</ul>

<p>The first step toward this is to define those areas as…</p>

<h2 id="hotspots">Hotspots</h2>

<div class="inpage-frame">
	<figure class="left">
		<img src="../images/diagrams/023_nodes/node.png" alt="Figure 1: The Node" style="width: 111px; height: 102px;" />
		<figcaption>
			Figure 1: The Node
		</figcaption>
	</figure>
</div>

<p>This just means we’re going to define parts of the node that will react to mouse clicks. Those would be the orange and yellow circles and the light blue rectangle at the top.</p>

<p>Why do we need multiple areas? Because eventually, we’ll also be connecting nodes one to another and this means we’ll want hotspots that react to:
<br />
<br /></p>

<ul>
  <li>an incoming connection,</li>
  <li>an outgoing connection, and</li>
  <li>mouse click-n-drag.</li>
</ul>

<p>Everything we need to do in order to get these hotspots set up will take place in the <code class="language-plaintext highlighter-rouge">MoveableNode</code> class. Let’s look at these changes by section…</p>

<h3 id="the-preamble">The Preamble</h3>

<p>Here’s where we declare the hot spots:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">double</span><span class="p">[</span><span class="nb">string</span><span class="p">]</span> <span class="n">dragArea</span><span class="p">;</span>
<span class="kt">double</span><span class="p">[</span><span class="nb">string</span><span class="p">]</span> <span class="n">inHotspot</span><span class="p">;</span>
<span class="kt">double</span><span class="p">[</span><span class="nb">string</span><span class="p">]</span> <span class="n">outHotspot</span><span class="p">;</span>
</code></pre></div></div>

<p>These three arrays will hold x/y coordinates for the upper-left and lower-right corners of the hot areas.</p>

<h3 id="the-constructor">The Constructor</h3>

<p>We leave the definition of the hotspot arrays until the constructor because we’re using associative arrays and, by nature, associative arrays aren’t constant and therefore can’t be defined in the preamble. But that’s okay, we’re just as happy to fill in the details here in the constructor:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">dragArea</span> <span class="p">=</span> <span class="p">[</span><span class="s">"left"</span> <span class="p">:</span> <span class="mi">13</span><span class="p">,</span> <span class="s">"top"</span> <span class="p">:</span> <span class="mi">9</span><span class="p">,</span> <span class="s">"right"</span> <span class="p">:</span> <span class="mi">99</span><span class="p">,</span> <span class="s">"bottom"</span> <span class="p">:</span> <span class="mi">30</span><span class="p">];</span>
<span class="n">inHotspot</span> <span class="p">=</span> <span class="p">[</span><span class="s">"left"</span> <span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="s">"top"</span> <span class="p">:</span> <span class="mi">27</span><span class="p">,</span> <span class="s">"right"</span> <span class="p">:</span> <span class="mi">10</span><span class="p">,</span> <span class="s">"bottom"</span> <span class="p">:</span> <span class="mi">38</span><span class="p">];</span>
<span class="n">outHotspot</span> <span class="p">=</span> <span class="p">[</span><span class="s">"left"</span> <span class="p">:</span> <span class="mi">100</span><span class="p">,</span> <span class="s">"top"</span> <span class="p">:</span> <span class="mi">60</span><span class="p">,</span> <span class="s">"right"</span> <span class="p">:</span> <span class="mi">110</span><span class="p">,</span> <span class="s">"bottom"</span> <span class="p">:</span> <span class="mi">70</span><span class="p">];</span>
</code></pre></div></div>

<p>And why associate arrays? Because when it comes time to put these values into play in our code, it’ll be easier to keep track of what we’re doing if we refer to them as <code class="language-plaintext highlighter-rouge">dragArea[“left”]</code> or <code class="language-plaintext highlighter-rouge">outHotspot[“top”]</code> as opposed to using a numerical index.</p>

<p>And we add one more line to the constructor to hook up the all-important <code class="language-plaintext highlighter-rouge">onButtonPress()</code> callback:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">addOnButtonPress</span><span class="p">(&amp;</span><span class="n">onButtonPress</span><span class="p">);</span>
</code></pre></div></div>

<p>For this stage, that’s all we need to do here so, moving on…</p>

<h3 id="the-callback">The Callback</h3>

<p>Here’s the onButtonPress() function:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code>	<span class="kt">bool</span> <span class="n">onButtonPress</span><span class="p">(</span><span class="n">Event</span> <span class="n">event</span><span class="p">,</span> <span class="n">Widget</span> <span class="n">widget</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">GdkEventButton</span><span class="p">*</span> <span class="n">buttonEvent</span> <span class="p">=</span> <span class="n">event</span><span class="p">.</span><span class="n">button</span><span class="p">;</span>
		<span class="kt">int</span> <span class="n">button1</span> <span class="p">=</span> <span class="mi">1</span><span class="p">;</span>
		<span class="kt">double</span> <span class="n">xMouse</span><span class="p">,</span> <span class="n">yMouse</span><span class="p">;</span>
		<span class="n">xMouse</span> <span class="p">=</span> <span class="n">buttonEvent</span><span class="p">.</span><span class="n">x</span><span class="p">;</span>
		<span class="n">yMouse</span> <span class="p">=</span> <span class="n">buttonEvent</span><span class="p">.</span><span class="n">y</span><span class="p">;</span>

		<span class="c1">// restrict active areas to terminal connections and the dragbar</span>
		<span class="k">if</span><span class="p">(</span><span class="n">xMouse</span> <span class="p">&gt;</span> <span class="n">dragArea</span><span class="p">[</span><span class="s">"left"</span><span class="p">]</span> <span class="p">&amp;&amp;</span> <span class="n">xMouse</span> <span class="p">&lt;</span> <span class="n">dragArea</span><span class="p">[</span><span class="s">"right"</span><span class="p">]</span> <span class="p">&amp;&amp;</span> <span class="n">yMouse</span> <span class="p">&gt;</span> <span class="n">dragArea</span><span class="p">[</span><span class="s">"top"</span><span class="p">]</span> <span class="p">&amp;&amp;</span> <span class="n">yMouse</span> <span class="p">&lt;</span> <span class="n">dragArea</span><span class="p">[</span><span class="s">"bottom"</span><span class="p">])</span>
		<span class="p">{</span>
			<span class="k">if</span><span class="p">(</span><span class="n">buttonEvent</span><span class="p">.</span><span class="n">button</span> <span class="k">is</span> <span class="n">button1</span><span class="p">)</span> <span class="c1">// ModifierType.BUTTON1_MASK</span>
			<span class="p">{</span>
				<span class="c1">// dragArea</span>
				<span class="n">dragAreaActive</span><span class="p">(</span><span class="n">xMouse</span><span class="p">,</span> <span class="n">yMouse</span><span class="p">);</span>
			<span class="p">}</span>
		<span class="p">}</span>
		<span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="n">xMouse</span> <span class="p">&gt;</span> <span class="n">inHotspot</span><span class="p">[</span><span class="s">"left"</span><span class="p">]</span> <span class="p">&amp;&amp;</span> <span class="n">xMouse</span> <span class="p">&lt;</span> <span class="n">inHotspot</span><span class="p">[</span><span class="s">"right"</span><span class="p">]</span> <span class="p">&amp;&amp;</span> <span class="n">yMouse</span> <span class="p">&gt;</span> <span class="n">inHotspot</span><span class="p">[</span><span class="s">"top"</span><span class="p">]</span> <span class="p">&amp;&amp;</span> <span class="n">yMouse</span> <span class="p">&lt;</span> <span class="n">inHotspot</span><span class="p">[</span><span class="s">"bottom"</span><span class="p">])</span>
		<span class="p">{</span>
			<span class="k">if</span><span class="p">(</span><span class="n">buttonEvent</span><span class="p">.</span><span class="n">button</span> <span class="k">is</span> <span class="n">button1</span><span class="p">)</span> <span class="c1">// ModifierType.BUTTON1_MASK</span>
			<span class="p">{</span>
				<span class="c1">// inHotspot</span>
				<span class="n">terminalInActive</span><span class="p">(</span><span class="n">xMouse</span><span class="p">,</span> <span class="n">yMouse</span><span class="p">);</span>
			<span class="p">}</span>
		<span class="p">}</span>
		<span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="n">xMouse</span> <span class="p">&gt;</span> <span class="n">outHotspot</span><span class="p">[</span><span class="s">"left"</span><span class="p">]</span> <span class="p">&amp;&amp;</span> <span class="n">xMouse</span> <span class="p">&lt;</span> <span class="n">outHotspot</span><span class="p">[</span><span class="s">"right"</span><span class="p">]</span> <span class="p">&amp;&amp;</span> <span class="n">yMouse</span> <span class="p">&gt;</span> <span class="n">outHotspot</span><span class="p">[</span><span class="s">"top"</span><span class="p">]</span> <span class="p">&amp;&amp;</span> <span class="n">yMouse</span> <span class="p">&lt;</span> <span class="n">outHotspot</span><span class="p">[</span><span class="s">"bottom"</span><span class="p">])</span>
		<span class="p">{</span>
			<span class="k">if</span><span class="p">(</span><span class="n">buttonEvent</span><span class="p">.</span><span class="n">button</span> <span class="k">is</span> <span class="n">button1</span><span class="p">)</span> <span class="c1">// ModifierType.BUTTON1_MASK</span>
			<span class="p">{</span>
				<span class="c1">// inHotspot</span>
				<span class="n">terminalOutActive</span><span class="p">(</span><span class="n">xMouse</span><span class="p">,</span> <span class="n">yMouse</span><span class="p">);</span>
			<span class="p">}</span>
		<span class="p">}</span>
	
		<span class="k">return</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// onButtonPress()</span>
</code></pre></div></div>

<p>This is where we separate the clicks we want to deal with from those we don’t, but we have a bit of prep to do before we can distinguish between them. And it starts with this line:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">GdkEventButton</span><span class="p">*</span> <span class="n">buttonEvent</span> <span class="p">=</span> <span class="n">event</span><span class="p">.</span><span class="n">button</span><span class="p">;</span>
</code></pre></div></div>

<p>What’s happening here is similar to a cast. The <code class="language-plaintext highlighter-rouge">event</code> variable passed into the function is generic, but we need to know the type of <code class="language-plaintext highlighter-rouge">Event</code> it represents.</p>

<p>If you look at the <em>GtkD</em> wrapper source (<a href="https://github.com/gtkd-developers/GtkD/blob/master/generated/gtkd/gdk/c/types.d">generated/gtkd/gdk/c/types.d</a>)  starting on line #2495, you’ll see that this <code class="language-plaintext highlighter-rouge">Event</code> construct has some depth. It’s a <code class="language-plaintext highlighter-rouge">struct</code> wrapped around a <code class="language-plaintext highlighter-rouge">union</code>. And within the <code class="language-plaintext highlighter-rouge">union</code>, there are multiple <code class="language-plaintext highlighter-rouge">struct</code>s, each defining a different type of <code class="language-plaintext highlighter-rouge">Event</code>. There’s a motion <code class="language-plaintext highlighter-rouge">Event</code>, a button <code class="language-plaintext highlighter-rouge">Event</code>, and a touch <code class="language-plaintext highlighter-rouge">Event</code>—just to name a few. And each of these <code class="language-plaintext highlighter-rouge">Event</code> types has properties meaningful to the type of <code class="language-plaintext highlighter-rouge">Event</code> it is. What we need to do is dig down into the <code class="language-plaintext highlighter-rouge">Event</code>’s <code class="language-plaintext highlighter-rouge">union</code> to pull out the type of <code class="language-plaintext highlighter-rouge">Event</code> we’re dealing with and from that, get the information we need… and what we need is three things:</p>

<ul>
  <li>the <code class="language-plaintext highlighter-rouge">x</code> coordinate of the pointer when the mouse button was pressed,</li>
  <li>the <code class="language-plaintext highlighter-rouge">y</code> coordinate, too, and</li>
  <li>the number of the mouse button… so we aren’t reacting to them all.</li>
</ul>

<p>The <code class="language-plaintext highlighter-rouge">Event</code> we’re after in this situation is the <code class="language-plaintext highlighter-rouge">GdkButtonEvent</code>, a struct which looks like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">struct</span> <span class="n">GdkEventButton</span>
<span class="p">{</span>
	<span class="n">GdkEventType</span> <span class="n">type</span><span class="p">;</span>
	<span class="n">GdkWindow</span><span class="p">*</span> <span class="n">window</span><span class="p">;</span>
	<span class="kt">byte</span> <span class="n">sendEvent</span><span class="p">;</span>
	<span class="kt">uint</span> <span class="n">time</span><span class="p">;</span>
	<span class="kt">double</span> <span class="n">x</span><span class="p">;</span>
	<span class="kt">double</span> <span class="n">y</span><span class="p">;</span>
	<span class="kt">double</span><span class="p">*</span> <span class="n">axes</span><span class="p">;</span>
	<span class="n">ModifierType</span> <span class="n">state</span><span class="p">;</span>
	<span class="kt">uint</span> <span class="n">button</span><span class="p">;</span>
	<span class="n">GdkDevice</span><span class="p">*</span> <span class="n">device</span><span class="p">;</span>
	<span class="kt">double</span> <span class="n">xRoot</span><span class="p">;</span>
	<span class="kt">double</span> <span class="n">yRoot</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>Of all the values in this struct, what we want are the <code class="language-plaintext highlighter-rouge">x</code> and <code class="language-plaintext highlighter-rouge">y</code> variables which, as you might expect, reflect the position of the pointer within the<code class="language-plaintext highlighter-rouge">DrawingArea</code>.</p>

<div class="inpage-frame">
	<figure class="right">
		<img src="../images/diagrams/023_nodes/event_hierarchy.png" alt="Figure 1: button variables at two levels in the hierarchy" style="width: 454px; height: 148px;" />
		<figcaption>
			Figure 1: button variables at two levels in the hierarchy
		</figcaption>
	</figure>
</div>

<p><em>Note: We don’t use <code class="language-plaintext highlighter-rouge">xRoot</code> and <code class="language-plaintext highlighter-rouge">yRoot</code> because they report the pointer position in relation to the upper-left corner of the <code class="language-plaintext highlighter-rouge">Screen</code>, the <code class="language-plaintext highlighter-rouge">Screen</code> being the area of your entire display—the monitor(s) connected to your computer. We’ll get into this <code class="language-plaintext highlighter-rouge">Screen</code> stuff in a later post.</em></p>

<p><em>Another note: Keep in mind, too, that a <code class="language-plaintext highlighter-rouge">button</code> variable also appears at two different levels of the hierarchy. The first (highest, outermost) is a</em> <code class="language-plaintext highlighter-rouge">GdkEventButton</code> struct <em>and the second (lowest, innermost) is a</em> uint. <em>Confusing the two could get dicey.</em></p>

<p>Getting back to the discussion at hand… of all the data contained within the <code class="language-plaintext highlighter-rouge">event</code>, all we need are:</p>

<ul>
  <li>the <code class="language-plaintext highlighter-rouge">x</code> and <code class="language-plaintext highlighter-rouge">y</code> coordinates, and</li>
  <li>the two <code class="language-plaintext highlighter-rouge">button</code> values:
    <ul>
      <li>the <code class="language-plaintext highlighter-rouge">GdkEventButton</code> struct from which we’ll glean those coordinates, as well as</li>
      <li>the <code class="language-plaintext highlighter-rouge">uint</code> representing the mouse button that was pressed.</li>
    </ul>
  </li>
</ul>

<p>So, we grab the button from the top-level of the <code class="language-plaintext highlighter-rouge">Event</code> and dig into it to get the mouse button number. 
We could also have addressed it directly as: <code class="language-plaintext highlighter-rouge">event.button.button</code>.</p>

<p>The x/y coordinates are pulled from the <code class="language-plaintext highlighter-rouge">GdkEventButton</code> struct and assigned to <code class="language-plaintext highlighter-rouge">xMouse</code> and <code class="language-plaintext highlighter-rouge">yMouse</code>. As mentioned above, these keep track of where the pointer was when the physical mouse button was clicked.</p>

<p>Then we use an <code class="language-plaintext highlighter-rouge">if</code>/<code class="language-plaintext highlighter-rouge">else</code> construct to differentiate between the various hotspot areas, calling a different handler function for each, those handlers being <code class="language-plaintext highlighter-rouge">dragAreaActive()</code>, <code class="language-plaintext highlighter-rouge">terminalInActive()</code>, and <code class="language-plaintext highlighter-rouge">terminalOutActive()</code> as mentioned above.</p>

<p>We could have done this the other way around but it really doesn’t matter in the end whether the inner <code class="language-plaintext highlighter-rouge">if</code>/<code class="language-plaintext highlighter-rouge">else</code> deals with which mouse button was pressed or which hotspot was under the pointer at the time.</p>

<p>And finally, we have…</p>

<h3 id="the-active-functions">The Active() Functions</h3>

<p>There are three of them (<code class="language-plaintext highlighter-rouge">terminalInActive()</code>, <code class="language-plaintext highlighter-rouge">terminalOutActive()</code>, and <code class="language-plaintext highlighter-rouge">dragAreaActive()</code>) We’ll just look at one because they’re pretty much the same:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">void</span> <span class="n">dragAreaActive</span><span class="p">(</span><span class="kt">double</span> <span class="n">xMouse</span><span class="p">,</span> <span class="kt">double</span> <span class="n">yMouse</span><span class="p">)</span>
<span class="p">{</span>
	<span class="c1">// see if the mouse is in the drag area </span>
	<span class="n">writeln</span><span class="p">(</span><span class="s">"dragArea: xMouse = "</span><span class="p">,</span> <span class="n">xMouse</span><span class="p">,</span> <span class="s">" yMouse = "</span><span class="p">,</span> <span class="n">yMouse</span><span class="p">);</span>
		
<span class="p">}</span> <span class="c1">// dragAreaActive()</span>
</code></pre></div></div>

<p>Right now, all these functions are stubs. Next time, we’ll start looking at their content.</p>

<h2 id="conclusion">Conclusion</h2>

<p>So, our hotspots are set up and all we have to do now is work out how to make this sucker move.</p>

<p>Note that at this time, we have no idea where the mouse pointer is in relation to our <code class="language-plaintext highlighter-rouge">NodeLayout</code>—that is, the surface we’ll be moving the Node around on—but that’s okay. We’ll look at that next time, too.</p>

<p>See you then.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0086-nodes-v-node-drawing-routines.html">Previous: Node V - Drawing Routines</a>
	</div>
	<div style="float: right;">
		<a href="./0088-nodes-vii-its-alive.html">Next: Nodes VII - It's Alive!</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0087-nodes-vi-hotspots.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
